import React, { PureComponent } from 'react';
import { connect } from 'umi';
import moment from 'moment';
import {
    Card,
    Select,
    Form,
    Spin,
    // DatePicker,
    Popover
} from 'antd';
import { Link }  from 'umi';

// import { YearPicker } from 'vv-frontend-components';

import { formatMessage } from 'umi';
import { get as _get } from 'object-path';
// import cookie from 'js-cookie';
import cn from 'classnames';
import uniqueid from 'lodash.uniqueid';
import xss from 'xss';
// eslint-disable-next-line import/no-unresolved
import clone from 'lodash/clone';

import { dateConversion, dateConversion2 } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { withRoutePage } from '@/utils/enhanceUtils';
import NewEnter from './ListPage/NewEnter';
import styles from './Log.less';

// Date.prototype.format = function() {
//     let s = '';
//     s += `${this.getFullYear()}-`; // 获取年份。
//     s += `${this.getMonth() + 1}-`; // 获取月份。
//     s += this.getDate(); // 获取日。
//     return s; // 返回日期。
// };
// const { RangePicker, WeekPicker, MonthPicker } = DatePicker;

@withRoutePage
@connect(({ log, loading }) => ({
    log,
    loading: loading.effects['log/fetchMycalendar']
}))
@Form.create()
class Log extends PureComponent {
    state = {
        redundantData: [],
        selectData: moment().year(),
        // dayType: 2,
        leaveCode: [''],
        typeCode: 'all',
        outTripOverStatus: 'all'
    };

    componentDidMount() {
        this.getRedundantData();
        this.getData();
    }

    getData = () => {
        const { dispatch } = this.props;
        const user = JSON.parse(localStorage.getItem('user'));
        const {
            // flageKey,
            selectData,
            leaveCode,
            typeCode,
            outTripOverStatus
        } = this.state;
        let a = '';
        let b = '';
        let c = '';
        if (leaveCode.length > 0) {
            a = '1';
        }
        if (typeCode !== '') {
            b = '2';
        }
        if (outTripOverStatus !== '') {
            c = '3';
        }
        const parameter = {
            companyCode: _get(user, 'companyId', ''),
            endTime: moment(`${selectData}-01`)
                .endOf('year')
                .format('YYYY-MM-DD'),
            startTime: moment(`${selectData}-01`)
                .startOf('year')
                .format('YYYY-MM-DD'),
            dayType: 2, // 法定
            leaveCode,
            whichYear: selectData,
            attandanceType: a + b + c,
            typeCode,
            outTripOverStatus
        };
        dispatch({
            type: 'log/fetchMycalendar',
            payload: {
                parameter
            },
            callback: () => {}
        });
        dispatch({
            type: 'log/fetchTypeList'
        });
    };

    // 获取当前日期
    processing = data => {
        const result = [];
        data.forEach(item => {
            result.push({
                ...item,
                today: moment(item.timeDetial).format('YYYY-MM-DD')
            });
        });
        return result;
    };
    // // 获得事件参数值后进行加工，返回新数组
    // processing = data => {
    //     const result = [];
    //     data.forEach(item => {
    //         result.push({
    //             ...item,
    //             arr: this.getAll(
    //                 moment(item.startTime.split(' ')[0]).format('YYYY-MM-DD'),
    //                 moment(item.endTime.split(' ')[0]).format('YYYY-MM-DD')
    //             )
    //         });
    //     });
    //     return result;
    // };

    // // 通过日期获取区间
    // getAll = (begin, end) => {
    //     const ab = begin.split('-');
    //     const ae = end.split('-');
    //     const db = new Date();
    //     db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
    //     const de = new Date();
    //     de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
    //     const unixDb = db.getTime();
    //     const unixDe = de.getTime();
    //     const arr = [];
    //     const time = 24 * 60 * 60 * 1000;
    //     for (let k = unixDb; k <= unixDe; ) {
    //         arr.push(new Date(parseInt(k, 10)).format());
    //         k += time;
    //     }
    //     return arr;
    // };

    /**
     * 计算表格里不需要展示的日期
     * 1.先定义好固定日期没有31天的
     * 2.先返回除了2月份的其他不需要显示的日期
     * 3.获取selectData里得年份，然后计算闰年还是平年，2月份的日期
     * 4.最后返回数组
     */
    getRedundantData = () => {
        const { selectData } = this.state;
        const rq = ['04-31', '06-31', '09-31', '11-31'];
        const newArr = [];
        rq.forEach(v => {
            newArr.push(`${selectData}-${v}`);
        });
        if (selectData % 400 === 0 || (selectData % 100 !== 0 && selectData % 4 === 0)) {
            newArr.push(`${selectData}-02-30`, `${selectData}-02-31`);
            newArr.push();
        } else {
            newArr.push(`${selectData}-02-29`, `${selectData}-02-30`, `${selectData}-02-31`);
        }
        // console.log(newArr, 'newArrnewArr');
        this.setState({
            redundantData: newArr
        });
    };

    /**
     * 这里是因为例如2019-01-01,但是后端给的日期可能会是2019-1-1这里需要对数据进行操作
     * 假如如果进来的数字小于10则在前面加个0
     */
    dataProcessing = num => {
        const result = num < 10 ? num.replace(/^0/, '') : num;
        return result;
    };

    /**
     * 异常数据进行处理
     * 组员对象进行对比，如果异常类型和名字一致的情况下修改内容值并生成新数组
     */
    exceptionDataProcessing = data => {
        const oldData = clone(data);
        const newArr = [];
        for (let i = 0; i < oldData.length; i += 1) {
            let exist = false;
            for (let d = i + 1; d < oldData.length; d += 1) {
                if (
                    oldData[i].exceptionName === oldData[d].exceptionName &&
                    oldData[i].exceptionDate === oldData[d].exceptionDate
                ) {
                    exist = true;
                    newArr.push({
                        ...oldData[i],
                        exceptionInterval: 3
                    });
                    oldData[d].oneDay = true;
                    oldData[d].exceptionInterval = 3;
                    oldData[d].countNum = 2;
                    break;
                }
            }
            if (!exist) {
                newArr.push({
                    ...oldData[i],
                    oneDay: true
                });
            }
        }
        return newArr.filter(item => item.oneDay);
    };

    // 点击筛选功能 根据type类型，进行code值写入写完后重新请求数据
    setSearchType = (type, code) => {
        const { leaveCode, outTripOverStatus, typeCode } = this.state;
        if (type === 'leave') {
            if (leaveCode[0] === code) {
                this.setState(
                    {
                        leaveCode: []
                    },
                    () => {
                        this.getData();
                    }
                );
            } else {
                const data = [];
                data.push(code);
                this.setState(
                    {
                        leaveCode: data
                    },
                    () => {
                        this.getData();
                    }
                );
            }
        } else if (type === 'typeCode') {
            if (typeCode === code) {
                this.setState(
                    {
                        typeCode: ''
                    },
                    () => {
                        this.getData();
                    }
                );
            } else {
                this.setState(
                    {
                        typeCode: code
                    },
                    () => {
                        this.getData();
                    }
                );
            }
        } else if (type === 'outTrip') {
            if (outTripOverStatus === code) {
                this.setState(
                    {
                        outTripOverStatus: ''
                    },
                    () => {
                        this.getData();
                    }
                );
            } else {
                this.setState(
                    {
                        outTripOverStatus: code
                    },
                    () => {
                        this.getData();
                    }
                );
            }
        }
    };

    /**
     * 事假类型数据渲染及绑定数据
     * 1.在接口返回的数据理,插入1条全部类型的数据再进行渲染
     * 2.绑定点击事件,及做class选中样式
     */
    setAttendanceType = () => {
        const {
            log: { typeList }
        } = this.props;
        const { leaveCode } = this.state;
        const allType = {
            leaveName: '全部类型',
            leaveCode: ''
        };
        let leaveTypeVos = [];
        if (typeList) {
            leaveTypeVos = clone(typeList.leaveTypeVos);
            leaveTypeVos.unshift(allType);
        }
        return leaveTypeVos.map(item => (
            <li
                key={item.leaveCode}
                onClick={() => this.setSearchType('leave', item.leaveCode)}
                className={styles[cn({ cur: leaveCode.includes(item.leaveCode) })]}
            >
                {item.leaveName}
            </li>
        ));
    };

    /**
     * 考勤异常
     */
    setAbnormal = () => {
        const {
            log: { typeList }
        } = this.props;
        const { typeCode } = this.state;
        const allType = {
            name: 'all',
            value: '全部类型'
        };
        let exceptionType = [];
        if (typeList) {
            exceptionType = clone(typeList.exceptionType);
            exceptionType.unshift(allType);
        }
        return exceptionType.map(item => (
            <li
                key={uniqueid('setAbnormal_')}
                onClick={() => this.setSearchType('typeCode', item.name)}
                className={styles[cn({ cur: typeCode === item.name })]}
            >
                {item.value}
            </li>
        ));
    };

    /**
     * 公出加班
     */
    setEvent = () => {
        const {
            log: { typeList }
        } = this.props;
        const { outTripOverStatus } = this.state;
        const allType = {
            name: 'all',
            value: '全部类型'
        };
        let outtripType = [];
        if (typeList) {
            outtripType = clone(typeList.outtripType);
            outtripType.unshift(allType);
        }
        return outtripType.map(item => (
            <li
                key={uniqueid('setEvent_')}
                onClick={() => this.setSearchType('outTrip', item.name)}
                className={styles[cn({ cur: outTripOverStatus === item.name })]}
            >
                {item.value}
            </li>
        ));
    };

    /**
     * 当点击日历类型的时候，进行写入筛选数据
     * 通过name值 因为法定节假日的点击比较特殊，需要改变dayType字段
     * 其他的把数据写入leaveCode里面就行
     */
    setLeaveCode = name => {
        const {
            // dayType,
            // leaveCode,
            flageKey
        } = this.state;
        let newArr = [];
        if (flageKey.includes(name)) {
            newArr = flageKey.filter(e => e !== name);
        } else {
            newArr = new Array(name).concat(flageKey);
        }
        this.setState(
            {
                flageKey: newArr
            },
            () => {
                this.getData();
            }
        );
    };

    // popcontent渲染区域
    // 事假
    returnTipss = tips => {
        const particular = ['产假', '陪产假', '婚假', '孩童假', '附加产假', '丧假', '无薪儿童护理假'];
        let html = '';
        if (particular.indexOf(tips.leaveName) > -1) {
            html += tips.startTimeStr;
            // html = moment(tips.startTime).format('YYYY.MM.DD');
            html += '-';
            html += tips.endTimeStr;
            // html += moment(tips.endTime).format('YYYY.MM.DD');
        } else {
            html += tips.startTimeStr;
            // html = moment(tips.startTime).format('HH:mm');
            html += '-';
            html += tips.endTimeStr;
            // html += moment(tips.endTime).format('HH:mm');
        }
        return (
            <li>
                <div>
                    {tips.leaveName}：{dateConversion(tips.leaveLong, 8)}
                    <Link
                        style={{ marginLeft: 5 }}
                        to={{
                            pathname: '/personal/portal/attendance/mine/holiday',
                            query: {
                                date: moment(tips.today).format('YYYY-MM')
                            }
                        }}
                    >
                        {formatMessage({
                            id: 'columns.noticeList.action.detail'
                        })}
                    </Link>
                </div>
                <div>
                    时间：
                    {html}
                </div>
            </li>
        );
    };

    // 考勤异常
    returnException = exceptions => {
        let html = '';
        let goPage = '';
        if (exceptions.code === 'absence') {
            html += exceptions.exceptionName;
            html += '：';
            html += exceptions.countNum;
            html += '次';
            goPage = () => (
                <Link
                    style={{ marginLeft: 5 }}
                    to={{
                        pathname: '/personal/portal/attendance/mine/abnormal',
                        query: {
                            date: moment(exceptions.exceptionDate).format('YYYY-MM'),
                            key: 'absencelist'
                        }
                    }}
                >
                    {formatMessage({
                        id: 'columns.noticeList.action.detail'
                    })}
                </Link>
            );
        } else if (exceptions.code === 'lackCard') {
            html += exceptions.exceptionName;
            html += '：';
            html += exceptions.countNum;
            html += '次';
            // if (exceptions.exceptionInterval === 2) {
            //     html += '<br/>下班卡';
            // } else if (exceptions.exceptionInterval === 1) {
            //     html += '<br/>上班卡';
            // } else if (exceptions.exceptionInterval === 3) {
            //     html += '<br/>上班卡，下班卡';
            // }
            goPage = () => (
                <Link
                    style={{ marginLeft: 5 }}
                    to={{
                        pathname: '/personal/portal/attendance/mine/abnormal',
                        query: {
                            date: moment(exceptions.exceptionDate).format('YYYY-MM'),
                            key: 'misslist'
                        }
                    }}
                >
                    {formatMessage({
                        id: 'columns.noticeList.action.detail'
                    })}
                </Link>
            );
        } else if (
            exceptions.code === 'lateOne' ||
            exceptions.code === 'lateTwo' ||
            exceptions.code === 'earlyOne' ||
            exceptions.code === 'earlyTwo'
        ) {
            html += exceptions.exceptionName;
            html += '：';
            html += exceptions.exceptionName.substring(0, exceptions.exceptionName.length - 1);
            html += exceptions.minute;
            html += '分钟';
            goPage = () => (
                <Link
                    style={{ marginLeft: 5 }}
                    to={{
                        pathname: '/personal/portal/attendance/mine/abnormal',
                        query: {
                            date: moment(exceptions.exceptionDate).format('YYYY-MM'),
                            key: 'latelist'
                        }
                    }}
                >
                    {formatMessage({
                        id: 'columns.noticeList.action.detail'
                    })}
                </Link>
            );
        }

        return (
            <li key={uniqueid('exceptions_')}>
                <span
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{ __html: xss(html) }}
                ></span>
                {goPage()}
            </li>
        );
    };

    // 我的外出
    returnMyOutTimeVos = myOutTimeVo => {
        let html;
        html = moment(myOutTimeVo.startTime).format('HH:mm');
        html += '-';
        html += moment(myOutTimeVo.endTime).format('HH:mm');
        return (
            <li key={uniqueid('myOutTimeVos_')}>
                <div>
                    外出：
                    {dateConversion2(myOutTimeVo.outLong)}
                    <Link
                        style={{ marginLeft: 5 }}
                        to={{
                            pathname: '/personal/portal/attendance/mine/outList',
                            query: {
                                date: moment(myOutTimeVo.outDate).format('YYYY-MM')
                            }
                        }}
                    >
                        {formatMessage({
                            id: 'columns.noticeList.action.detail'
                        })}
                    </Link>
                </div>
                <div>
                    时间：
                    {html}
                </div>
            </li>
        );
    };

    // 我的加班
    returnMyOverTime = myOverTimes => {
        let html;
        html = moment(myOverTimes.startTime).format('HH:mm');
        html += '-';
        html += moment(myOverTimes.endTime).format('HH:mm');
        return (
            <li key={uniqueid('myOverTimes_')}>
                <div>
                    加班：
                    {dateConversion2(myOverTimes.overLong)}
                    <Link
                        style={{ marginLeft: 5 }}
                        to={{
                            pathname: '/personal/portal/attendance/mine/overList',
                            query: {
                                date: moment(myOverTimes.overDate).format('YYYY-MM')
                            }
                        }}
                    >
                        {formatMessage({
                            id: 'columns.noticeList.action.detail'
                        })}
                    </Link>
                </div>
                <div>
                    时间：
                    {html}
                </div>
            </li>
        );
    };

    // 我的出差
    returnMyTripTimeVos = myTripTimeVo => {
        let html;
        html = moment(myTripTimeVo.startTime).format('HH:mm');
        html += '-';
        html += moment(myTripTimeVo.endTime).format('HH:mm');
        return (
            <li key={uniqueid('myTripTimeVo_')}>
                <div>
                    出差：
                    {dateConversion(myTripTimeVo.tripLong, 8)}
                    <Link
                        style={{ marginLeft: 5 }}
                        to={{
                            pathname: '/personal/portal/attendance/mine/tripList',
                            query: {
                                date: moment(myTripTimeVo.tripDate).format('YYYY-MM')
                            }
                        }}
                    >
                        {formatMessage({
                            id: 'columns.noticeList.action.detail'
                        })}
                    </Link>
                </div>
                <div>
                    时间：
                    {html}
                </div>
            </li>
        );
    };

    // popcontent渲染区域

    /**
     * 创建考勤日历表
     */
    initLog = () => {
        const { redundantData } = this.state;
        // const {
        //     log: { thead, month, ddd },
        //     log
        // } = this.props;
        const {
            log: { thead, month },
            log
        } = this.props;
        const { holiday, weekend, leave, fillsClass, myOverTime, myOutTimeVos, exception, myTripTimeVos } = _get(
            log,
            'data',
            []
        );
        // const exceptionData = this.exceptionDataProcessing(exception);
        let tipss = '';
        if (leave) {
            tipss = this.processing(leave);
        } else {
            tipss = '';
        }

        return (
            <div className={styles.scroll}>
                <table className={styles.log}>
                    <thead>
                        <tr key="表头">
                            {/* 表头的循环 0-31 */}
                            {thead.map(titleItem => (
                                <th
                                    key={uniqueid('thead_')}
                                    style={{
                                        background: 'rgba(0,0,0,0.02)'
                                    }}
                                >
                                    {titleItem}
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {/* 月份循环 */}
                        {month.map(item => (
                            <tr key={uniqueid('month_')}>
                                {/* 表头循环 同时循环生成表格 */}
                                {thead.map((e, i) => {
                                    const contents = [];
                                    const innerContents = [];
                                    // 判断第一列，应该显示为月份
                                    if (i === 0) {
                                        return (
                                            <td
                                                key={e}
                                                style={{
                                                    background: 'rgba(0,0,0,0.02)',
                                                    minWidth: '60px',
                                                    color: '#000'
                                                }}
                                            >
                                                {item}
                                            </td>
                                        );
                                    }

                                    tipss.forEach(tips => {
                                        // const y = this.dataProcessing(
                                        //     tips.today.split('-')[0]
                                        // );
                                        const m = this.dataProcessing(tips.today.split('-')[1]);
                                        const d = this.dataProcessing(tips.today.split('-')[2]);
                                        if (`${m}月` === item && e === d) {
                                            contents.push(this.returnTipss(tips));
                                            innerContents.push(
                                                <div className={styles.tips}>
                                                    <i className={cn(styles.tag)} />
                                                </div>
                                            );
                                        }
                                    });
                                    exception.forEach(exceptions => {
                                        // const y = this.dataProcessing(
                                        //     exceptions.exceptionDate.split(
                                        //         '-'
                                        //     )[0]
                                        // );
                                        const m = this.dataProcessing(exceptions.exceptionDate.split('-')[1]);
                                        const d = this.dataProcessing(exceptions.exceptionDate.split('-')[2]);
                                        if (`${m}月` === item && e === d) {
                                            contents.push(this.returnException(exceptions));
                                            innerContents.push(
                                                <div className={styles.tips}>
                                                    <i className={cn(styles.tag, styles.yellow)} />
                                                </div>
                                            );
                                        }
                                    });
                                    myOutTimeVos.forEach(myOutTimeVo => {
                                        // const y = this.dataProcessing(
                                        //     myOutTimeVo.outDate.split(
                                        //         '-'
                                        //     )[0]
                                        // );
                                        const m = this.dataProcessing(myOutTimeVo.outDate.split('-')[1]);
                                        const d = this.dataProcessing(myOutTimeVo.outDate.split('-')[2]);
                                        if (`${m}月` === item && e === d) {
                                            contents.push(this.returnMyOutTimeVos(myOutTimeVo));
                                            innerContents.push(
                                                <div className={styles.tips}>
                                                    <i className={cn(styles.tag, styles.green)} />
                                                </div>
                                            );
                                        }
                                    });
                                    myOverTime.forEach(myOverTimes => {
                                        // const y = this.dataProcessing(
                                        //     myOverTimes.overDate.split(
                                        //         '-'
                                        //     )[0]
                                        // );
                                        const m = this.dataProcessing(myOverTimes.overDate.split('-')[1]);
                                        const d = this.dataProcessing(myOverTimes.overDate.split('-')[2]);
                                        if (`${m}月` === item && e === d) {
                                            contents.push(this.returnMyOverTime(myOverTimes));
                                            innerContents.push(
                                                <div className={styles.tips}>
                                                    <i className={cn(styles.tag, styles.green)} />
                                                </div>
                                            );
                                        }
                                    });
                                    myTripTimeVos.forEach(myTripTimeVo => {
                                        // const y = this.dataProcessing(
                                        //     myTripTimeVo.tripDate.split(
                                        //         '-'
                                        //     )[0]
                                        // );
                                        const m = this.dataProcessing(myTripTimeVo.tripDate.split('-')[1]);
                                        const d = this.dataProcessing(myTripTimeVo.tripDate.split('-')[2]);
                                        if (`${m}月` === item && e === d) {
                                            contents.push(this.returnMyTripTimeVos(myTripTimeVo));
                                            innerContents.push(
                                                <div className={styles.tips}>
                                                    <i className={cn(styles.tag, styles.green)} />
                                                </div>
                                            );
                                        }
                                    });
                                    holiday.forEach(jjr => {
                                        // const y = this.dataProcessing(
                                        //     jjr.whichDay.split('-')[0]
                                        // );
                                        const m = this.dataProcessing(jjr.whichDay.split('-')[1]);
                                        const d = this.dataProcessing(jjr.whichDay.split('-')[2]);

                                        if (`${m}月` === item && e === d) {
                                            contents.push(<div>{jjr.holidayName}</div>);
                                            innerContents.push(
                                                <div
                                                    style={{
                                                        position: 'relative'
                                                    }}
                                                >
                                                    <i
                                                        className="iconfont iconoa_form_icon_star_default"
                                                        style={{
                                                            color: '#FF3300'
                                                        }}
                                                    />
                                                </div>
                                            );
                                        }
                                    });
                                    // 否则 除了第二列显示空表格
                                    return (
                                        <td key={uniqueid('td_')}>
                                            {/* 比如休息日 */}
                                            {weekend &&
                                                weekend.map(wd => {
                                                    // const y = this.dataProcessing(
                                                    //     wd.split('-')[0]
                                                    // );
                                                    const m = this.dataProcessing(wd.split('-')[1]);
                                                    const d = this.dataProcessing(wd.split('-')[2]);
                                                    if (`${m}月` === item && e === d) {
                                                        return (
                                                            <span
                                                                key={uniqueid('weekend_')}
                                                                className={styles.restDay}
                                                            />
                                                        );
                                                    }
                                                    return null;
                                                })}
                                            {/* 比如补班 */}
                                            {fillsClass &&
                                                fillsClass.map(bb => {
                                                    // const y = this.dataProcessing(
                                                    //     bb.split('-')[0]
                                                    // );
                                                    const m = this.dataProcessing(bb.split('-')[1]);
                                                    const d = this.dataProcessing(bb.split('-')[2]);
                                                    if (`${m}月` === item && e === d) {
                                                        return <span key={uniqueid('fillsClass_')}>班</span>;
                                                    }
                                                    return null;
                                                })}
                                            <Popover content={<ul className={styles.contensInfo}>{contents}</ul>}>
                                                {/* 循环特殊格子项目 */}
                                                {/* 格子去除的样式 */}
                                                {redundantData &&
                                                    redundantData.map(v => {
                                                        // const y = this.dataProcessing(
                                                        //     v.split(
                                                        //         '-'
                                                        //     )[0]
                                                        // );
                                                        const m = this.dataProcessing(v.split('-')[1]);
                                                        const d = this.dataProcessing(v.split('-')[2]);
                                                        if (`${m}月` === item && e === d) {
                                                            return (
                                                                <span
                                                                    key={uniqueid('redundantData_')}
                                                                    className={styles.redundan}
                                                                />
                                                            );
                                                        }
                                                        return null;
                                                    })}

                                                {innerContents}
                                            </Popover>
                                        </td>
                                    );
                                })}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        );
    };

    handleChange = v => {
        this.setState(
            {
                selectData: v
            },
            () => {
                this.getData();
                this.getRedundantData();
            }
        );
    };

    disabledDate = current => current && current < moment().endOf('year');

    // 年份选择
    getDateOption = () => {
        const { Option } = Select;
        // 通过moment()获取今年和上一年的年份
        // const arr = [
        //     moment().format('YYYY'),
        //     moment()
        //         .add(1, 'year')
        //         .format('YYYY')
        // ];
        // const arr = ['2019', '2020'];

        const arr = [];
        const startTime = 2019;
        const endTime = moment().year();
        for (let i = startTime; i <= endTime; i += 1) {
            arr.push(i);
        }
        return (
            arr &&
            arr.map(item => (
                <Option key={`option_${item}`} value={item}>
                    {item}
                </Option>
            ))
        );
    };

    render() {
        const { loading } = this.props;

        const { selectData } = this.state;
        return (
            <PageHeaderWrapper>
                <NewEnter />
                <Card className={styles.datapick} bordered={false}>
                    <Select value={selectData} style={{ width: 120 }} onChange={this.handleChange}>
                        {this.getDateOption()}
                    </Select>
                    {/* <YearPicker
                    value={selectData}
                    onChange={this.handleChange}
                    onPanelChange={this.handleChange}
                    disabledDate={this.disabledDate} /> */}
                    <div className={styles.type}>
                        <b>
                            <i className={cn(styles.dot, styles.a)} />
                            请假/假期
                        </b>
                        <ul>{this.setAttendanceType()}</ul>
                    </div>
                    <div className={styles.type}>
                        <b>
                            <i className={cn(styles.dot, styles.b)} />
                            考勤异常
                        </b>
                        <ul>{this.setAbnormal()}</ul>
                    </div>
                    <div className={styles.type}>
                        <b>
                            <i className={cn(styles.dot, styles.c)} />
                            公出/加班
                        </b>
                        <ul>{this.setEvent()}</ul>
                    </div>
                    <Spin spinning={loading}>{this.initLog()}</Spin>
                </Card>
            </PageHeaderWrapper>
        );
    }
}

export default Log;
